<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>index</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Lars Huring">
	
	<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<link rel="stylesheet" href="css/ui-darkness/jquery-ui-1.7.1.custom.css" type="text/css" media="screen" title="no title" charset="utf-8">
	
	<script src="http://www.google.com/jsapi" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		google.load("jquery", "1.3.2");
		google.load("jqueryui", "1.7.1");
	</script>
	
	<script src="SocialMashup/jquery.socialmashup.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript" charset="utf-8">
	
		var SMDemo = {
			
				flickr: function(obj) {
					
					var li = $("<li />");
					var a = $("<a />")
						.attr("href", "http://www.flickr.com/photos/" + obj.owner + "/" + obj.id + "/")
						.appendTo(li);
						
					$("<img />")
						.attr("src", obj.thumb)
						.attr("alt", obj.title)
						.appendTo(a);
						
					return li;
					
				},
				
				twitter: function(obj) {
					
					var li = $("<li />");		
					var a = $("<a />")
						.attr("href", obj.permalink)
						.text(obj.title)
						.appendTo(li);
					
					$("<span />")
						.text(obj.author)
						.appendTo(a);
					
					return li;
					
				}
			
		}
		
		$().ready(function() {
			
			$("#loader")
				.ajaxStart(function() { $(this).fadeIn(); })
				.ajaxComplete(function() { $(this).fadeOut(); })
			
			/**
			* Default behaviour, all networks
			*/ 
			$("#flickrntwitter span").click(function(e) {
				
				$(this).socialize({
					max_results: 7,
					onComplete: function(json)
					{	
						var c = $("<div />");
						var t = $("<ul />").addClass("twitter-list");
						var f = $("<ul />").addClass("flickr-list");
						
						$("<h4 />").text("Results for \"" + json.search + "\"").appendTo(c);
						
						$("<li><h5>Twitter</h5></li>").appendTo(t);
						
						$.each(json.items, function(i, item) {
							
							switch(item.network)
							{
								case "flickr":
									var itm = SMDemo.flickr(this);
									itm.appendTo(f);
									break;
									
								case "twitter":
									var itm = SMDemo.twitter(this);
									itm.appendTo(t);
									break;
							}
							
						});
						
						f.appendTo(c);
						t.appendTo(c);
						
						$(c).dialog({
								bgiframe: true,
								height: 600,
								width: 620,
								modal: true
							});
						

					}
				});
				
			});
			
			/**
			* Flickr only
			*/
			$("#flickr span").click(function(e) {
				
				$(this).socialize({
					networks: ["flickr"],
					max_results: "100",
					onComplete: function(json)
					{	
						var c = $("<div />");
						var f = $("<ul />").addClass("flickr-list");
						
						$("<h4 />").text("Results for \"" + json.search + "\"").appendTo(c);
						
						$.each(json.items, function(i, item) {
							var itm = SMDemo.flickr(this);
							itm.appendTo(f);
						});
						
						f.appendTo(c);
						
						$(c).dialog({
								bgiframe: true,
								height: 600,
								width: 620,
								modal: true
							});
					}
				});
				
			});
			
			/**
			* Twitter only
			*/
			$("#twitter span").click(function(e) {
				
				$(this).socialize({
					networks: ["youtube"],
					max_results: "25",
					onComplete: function(json)
					{	
					
						var c = $("<div />");
						var f = $("<ul />").addClass("twitter-list");
						
						$("<h4 />").text("Results for \"" + json.search + "\"").appendTo(c);
						
						$.each(json.items, function(i, item) {
							var itm = SMDemo.twitter(this);
							itm.appendTo(f);
						});
						
						f.appendTo(c);
						
						$(c).dialog({
								bgiframe: true,
								height: 600,
								width: 620,
								modal: true
							});
					}
				});
				
			});
				
				
		});
		
	</script>
	
</head>
<body>

	<div id="content">
		
		<h1>SocialMashup<small>0.2</small></h1>
		<h5>
			A small project, just for fun. Click on the highlighted words and see pictures tagged with that word on flickr or mentions on twitter.
			Could be quite useful for something like a product, a company or something else where you might want to see what other people have to say about
			something, would need to add "Go to original link"-item in popup, or just add an icon besides the link that opens up the social mashup.
			Maps would be nice as well, to get the geo-tags from the tweets/images/etc and position them on a map as well.
		</h5>
		
		<div id="flickrntwitter">
			<h2>Twitter and Flickr, click to show</h2>
			<p>"No, of course not," said Zaphod breezily. "Well, I may have just dropped in briefly, you know, on my way somewhere ..."</p>
			<p>Finally he could bear it no more. He lifted his heads up to the sky, let out a wild whoop in major thirds, threw the <span>bomb</span> to the ground and ran forward through the sea of suddenly frozen smiles.</p>
			<p>Many men of course became extremely rich, but this was perfectly natural and nothing to be <span>#ashamed</span> of because no one was really poor - at least no one worth speaking of. And for all the richest and most successful merchants life inevitably became rather dull and niggly, and they began to imagine that this was therefore the fault of the worlds they'd settled on - none of them was entirely satisfactory: either the climate wasn't quite right in the later part of the afternoon, or the day was half an hour too long, or the sea was exactly the wrong shade of pink.</p>
		</div>
	
		<div id="flickr">
			<h2>Flickr only</h2>
			<p>"But that <span>sunset</span>! I've never seen anything like it in my wildest dreams ... the two suns! It was like mountains of <span>fire</span> boiling into <span>space</span>."</p>
			<p>Arthur scrambled up on to one end of the excitingly chunky pieces of moulded contouring where the curve of the wall met the ceiling.</p>
			<p>So saying, they turned on their <span>heels</span> and walked out of the door and into a lifestyle beyond their <span>wildest dreams</span>.</p>		
		</div>
	
		<div id="twitter">
			<h2>Twitter only</h2>
			<p>Ford rounded on Arthur with an <span>#angry</span> flash in his eyes. Now he felt he was back on <span>home ground</span> he suddenly began to resent having lumbered himself with this ignorant primitive who knew as much about the affairs of the Galaxy as an Ilford-based gnat knew about life in Peking.</p>
			<p>In <span>#fact</span>, Ford Prefect was a roving researcher for that wholly <span>remarkable</span> book The Hitch Hiker's Guide to the Galaxy.</p>
			<p>"I said we've met."</p>
			<p><span>kalle</span></p>
		</div>
		
		<div id="loader"><p>Searching...</p></div>
	
		<p class="footer">(c) 2009 Lars Huring. <a href="http://twitter.com/huring">twitter.com/huring</a></p>
	
	</div>
	

</body>
</html>
